<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.css">
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <link rel="stylesheet" href="../bootstrapvalidator-aae9288/dist/css/bootstrapValidator.css">
    <title>Title</title>
    <style>

            div{
               // border:solid red 1px;
            }

    </style>
</head>
<body>
<div class="container-fluid" style="padding: 50px;">
    <div class="row">
        <div class="col-md-6" style="padding-left: 280px;padding-top: 35px">
            <div class="form-group">
                <div class="col-sm-10">
                    <img src="../images/333.png" height="260" width="210" id="surfaceImg"/>
                </div>
            </div>
                <div class="form-group" style="width: 150px;margin-left:15px">
                        <input type="file" class="form-control files" id="surfaceFile" name="files" multiple=""
                               placeholder="选择图片">
                </div>
                <div class="text-left" style="margin-top:-49px;margin-left:170px;">
                    <button id="ComfirmFor" type="button" class="btn btn-primary">上传</button>
                </div>
        </div>
        <div class="col-md-5" style="padding-left: 70px; padding-right: 50px">
            <form id="gotohomeForm">
                <div class="form-group">
                    <label for="em_name">姓名</label>
                    <input type="text" class="form-control" id="em_name" name="em_name" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="em_idcard">身份证</label>
                    <input type="text" class="form-control" id="em_idcard" name="em_idcard" placeholder="请输入身份证">
                </div>
                <div class="form-group">
                    <label for="em_phone">电话</label>
                    <input type="text" class="form-control" id="em_phone" name="em_phone" placeholder="请输入电话">
                </div>
                <div class="form-group">
                    <label for="em_address">地址</label>
                    <input type="text" class="form-control" id="em_address" name="em_address" placeholder="请输入地址">
                </div>
                <div class="form-group">
                    <label for="em_enjobtime">入职时间</label>
                    <input type="text" class="form-control" id="em_enjobtime" name="em_enjobtime" placeholder="请输入入职时间">
                </div>
            </form>
        </div>
    </div>
    <div class="text-center" style="margin-top:20px">
        <button id="ComfirmForupdate" type="button" class="btn btn-primary"style="width: 100px">更新</button>
    </div>
</div>
    <script src="../jquery/jquery-3.5.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../toastr/toastr.min.js"></script>
    <script src="../jquery-validation/jquery.validate.js"></script>
    <script src="../jquery-validation/messages_zh.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/bootstrapValidator.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/language/zh_CN.js"></script>
    <script>

        var em_id;
        $(document).ready(function () {
//把id带到这个页面
            $.ajax({
                url: "/employee/getId",
                type: "get",
                dataType: "json",
                success: function (result) {
                    em_id = result.errorCode;
                    //然后去查找picture的路径
                    $.ajax({
                        url:"/employee/selectpicture",
                        datatype:"json",
                        type:"post",
                        data:{
                            em_id:em_id
                        },
                        success:function (res) {
                            $("#surfaceImg").attr("src",res.status);
                        }
                    });


                }
            });


            //把上传的图片显示出来
            $("#surfaceFile").change(function () {
                imgPreview(this);
            });
            function imgPreview(fileDom) {
                //判断是否支持FileReader
                if (window.FileReader) {
                    var reader = new FileReader();
                } else {
                    alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
                }

                //获取文件
                var file = fileDom.files[0];
                console.log(file);
                var imageType = /^image\//;
                //是否是图片
                if (!imageType.test(file.type)) {
                    alert("请选择图片！");
                    return;
                }
                reader.readAsDataURL(file);
                //读取完成
                reader.onload = function (e) {
                    //获取图片dom
                    var img = $("#surfaceImg");
                    //图片路径设置为读取的图片
                    img.attr("src", e.target.result);
                    // alert(e.target.result);
                };
            }
//作为编辑,把val填入
            $.ajax({
                url:"/employee/getEmpMassage",
                datatype:"json",
                type:"post",
                success:function (result) {
                    $("#em_name").val(result.object.em_name);
                    $("#em_idcard").val(result.object.em_idcard);
                    $("#em_address").val(result.object.em_address);
                    $("#em_phone").val(result.object.em_phone);
                    $("#em_enjobtime").val(result.object.em_enjobtime);
                }
            });


            // $("#okBtn").click(function () {
            //     //    批量上传图片，第一位封面图片
            //
            //     $(".files").each(function () {
            //         formData.append('files', this.files[0]);
            //     })
            //     console.log(formData);
            //     formData.append('assets_id',assets_id);
            //     formData.append('info',$("#info").val());
            //
            //     $.ajax({
            //         url: '/fixAssets/upload',
            //         type: 'POST',
            //         data: formData,
            //         /**
            //          *必须false才会自动加上正确的Content-Type
            //          */
            //         contentType: false,
            //         /**
            //          * 必须false才会避开jQuery对 formdata 的默认处理
            //          * XMLHttpRequest会对 formdata 进行正确的处理
            //          */
            //         processData: false,
            //         success: function (res) {
            //             console.log(res);
            //             if(res.errorCode==0){
            //                 alert("上传成功");
            //                 // $(location).attr("href","bookinfook");
            //             }else{
            //                 alert("更新失败，请检查");
            //             }
            //         }
            //     });
            //
            // });



            $("#ComfirmFor").click(function () {
                var formData = new FormData();
                $(".files").each(function () {
                    formData.append('files', this.files[0]);
                });
                formData.append('em_id',em_id);

                $.ajax({
                    url: '/employee/upload',
                        type: 'POST',
                        data: formData,
                        /**
                         *必须false才会自动加上正确的Content-Type
                         */
                        contentType: false,
                        /**
                         * 必须false才会避开jQuery对 formdata 的默认处理
                         * XMLHttpRequest会对 formdata 进行正确的处理
                         */
                        processData: false,
                        success: function (res) {
                        if(res.errorCode==0){
                            toastr.success("上传成功");
                        }else{
                            toastr.error("上传失败");

                        }
                    }
                });
            })










        });
    </script>
</body>
</html>